<template>
    <div class="branc">
        <div class="buts">
            <el-button type="primary" size="mini" v-authCode.show="B_0302" @click="specialVisible = true">查询</el-button>
            <el-button type="primary" size="mini" v-authCode.show="B_0303" @click="resChechSelect">刷新</el-button>
            <el-button type="primary" size="mini" v-authCode.show="B_0304" @click="chceckData('1', '')">复核通过</el-button>
            <el-button type="danger" size="mini" v-authCode.show="B_0305" @click="chceckData('2', '')">复核拒绝</el-button>
        </div>
        <div class="tables">
            <el-table
                :header-cell-style="{ backgroundColor: '#e8f3ff', padding: '4px 0', 'text-align': 'center' }"
                :cell-style="{ padding: '0' }"
                :row-style="{ height: '35px' }"
                :header-row-style="{ height: '35px', padding: '5px 0' }"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                size="mini"
                height="70vh"
                v-loading="loading"
                @selection-change="handleSelectionChange"
                @sort-change="handleSort"
            >
                <el-table-column type="selection" width="45"> </el-table-column>
                <el-table-column label="模板编码" width="120" prop="templateCode" show-overflow-tooltip> </el-table-column>
                <el-table-column label="事件" width="120" prop="modifyType" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.modifyType == '1'" style="color:blue"> 新增模板 </span>
                        <span v-else-if="scope.row.modifyType == '2'" style="color:green"> 修改模板</span>
                        <span v-else-if="scope.row.modifyType == '3'" style="color:red"> 删除模板</span>
                    </template>
                </el-table-column>
                <el-table-column label="模板标识" width="120" prop="entryType" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.type == '1'"> 分支模板 </span>
                        <span v-else-if="scope.row.type == '2'">范围模板</span>
                    </template>
                </el-table-column>
                <el-table-column label="模板名称" prop="templateName" show-overflow-tooltip> </el-table-column>
                <el-table-column label="修改日期" width="180" prop="modifyDate" show-overflow-tooltip align="center" sortable="custon">
                    <template slot-scope="scope">
                        {{ dateFormat(scope.row.modifyDate) }} {{ timeFormat(scope.row.modifyTime) }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="修改时间" width="150" prop="modifyTime" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        {{ timeFormat(scope.row.modifyTime) }}
                    </template>
                </el-table-column> -->
                <el-table-column label="修改人" width="150" prop="modifyUser" show-overflow-tooltip> </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template slot-scope="scope">
                        <RiskIconButton
                            type="primary"
                            v-authCode="B_0306"
                            icon="el-icon-view"
                            topTitle="查看模板"
                            size="mini"
                            @on-click="addTabs('look', scope.row)"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="primary"
                            v-authCode="B_0307"
                            disabled="{true}"
                            icon="el-icon-edit"
                            topTitle="编辑模板"
                            size="mini"
                            @on-click="addTabs('edit', scope.row)"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="primary"
                            v-authCode="B_0300"
                            icon="el-icon-circle-check"
                            topTitle="复核通过"
                            @on-click="chceckData('1', scope.row)"
                            size="mini"
                        ></RiskIconButton>
                        <RiskIconButton
                            type="danger"
                            v-authCode="B_0130"
                            icon="el-icon-circle-close"
                            topTitle="复核拒绝"
                            size="mini"
                            @on-click="chceckData('2', scope.row)"
                        ></RiskIconButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <risk-pagination :paging="paging" @page-change="currentChange"></risk-pagination>
            </div>
        </div>
        <yh-dialog drag title="查询模板信息" :visible.sync="specialVisible" width="460px" :before-close="closeBound" v-loading="loading">
            <el-form ref="form" label-width="100px" size="mini">
                <el-form-item label="模板编码">
                    <el-input v-model="templateCode" />
                </el-form-item>
                <el-form-item label="模板名称">
                    <el-input v-model="templateName" />
                </el-form-item>
                <el-form-item label="模板标识">
                    <el-select v-model="type" clearable style="width:100%">
                        <el-option label="1 分支模板" value="1"></el-option>
                        <el-option label="2 范围模板" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建日期">
                    <el-date-picker v-model="modifyDate" type="date" format="yyyyMMdd" value-format="yyyyMMdd" size="mini"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeBound">
                    取 消
                </el-button>
                <el-button size="mini" @click="resetBoundData">
                    重 置
                </el-button>
                <el-button size="mini" type="primary" @click="specialClick">确 定 </el-button>
            </div>
        </yh-dialog>
        <yh-dialog drag :title="checkTitle" :visible.sync="deleteVisible" width="460px" v-loading="loading">
            <div class="delete">
                {{ selectDataTostring }}
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="deleteVisible = false">
                    取 消
                </el-button>
                <el-button size="mini" type="primary" @click="submitData">确 定 </el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import { timeFormat, dateFormat } from '@/utils/tools';
import RiskPagination from '@/common/components/risk-pagination.vue';

@Component({
    name: 'ItemTemplateCheck',
    components: {
        RiskIconButton,
        RiskPagination,
    },
})
export default class ItemTemplateCheck extends mixins(RiskEmitter) {
    dateFormat = dateFormat;
    timeFormat = timeFormat;
    tableData: any[] = [];
    paging: any = {
        total: 0,
        currentPage: 1,
        totalPage: 0,
        pageSize: 25,
    };
    templateCode: any = '';
    modifyDate: any = '';
    templateName: any = '';
    type: any = '';
    loading: boolean = false;
    specialVisible: boolean = false;
    deleteVisible: boolean = false;
    DictionConstUtil: any = DictionConstUtil;
    selectData: any[] = []; // 选中项
    selectDataTostring: string = '';
    checkTitle: string = '确定复核通过以下条目吗？';
    checkType: string = '1';
    sort: string = '';
    // 排序字段
    sortableObj = {
        modifyDate: 'CONCAT(D_MODIFY_DATE,D_MODIFY_TIME)',
    };

    async mounted() {
        // 风险类型
        this.getSpecialTemplateList(this.paging, this.type, this.modifyDate, this.templateCode, this.templateName);
    }

    // 获取列表数据
    getSpecialTemplateList(paging: any, type: any, modifyDate: any, templateCode: any, templateName: any) {
        let datas = {
            paging: paging,
            type: type,
            modifyDate: modifyDate,
            templateCode: templateCode,
            templateName: templateName,
            boundType: '',
            entryType: '',
            sort: this.sort
        };
        this.loading = true;
        this.$axios
            .post('/entry/template/check/list', datas)
            .then((res: any) => {
                this.loading = false;
                this.tableData = res.list;
                this.paging.total = res.total;
                this.paging.totalPage = res.totalPage;
            })
            .catch(() => {
                this.loading = false;
                this.tableData = [];
                this.paging.total = 0;
                this.paging.totalPage = 0;
            });
    }

    closeBound() {
        this.resetBoundData();
        this.specialVisible = false;
    }

    resetBoundData() {
        this.templateCode = '';
        this.modifyDate = '';
        this.templateName = '';
        this.type = '';
    }

    // 回调函数
    addTabs(data: any, val: any) {
        let datas: any = {};
        datas.type = data;
        datas.value = val;
        this.dispatch('ItemTemplate', 'checkTables', datas);
    }

    // 删除的数据
    deleteOne(val: any) {
        this.deleteVisible = true;
    }

    // 删除
    deleteData() {}

    // 翻页
    currentChange() {
        this.getSpecialTemplateList(this.paging, this.type, this.modifyDate, this.templateCode, this.templateName);
    }

    // 查询
    specialClick() {
        this.specialVisible = false;
        this.getSpecialTemplateList(this.paging, this.type, this.modifyDate, this.templateCode, this.templateName);
    }

    // 刷新
    resChechSelect() {
        this.paging = {
            total: 0,
            currentPage: 1,
            totalPage: 0,
            pageSize: 25,
        };
        this.templateCode = '';
        this.modifyDate = '';
        this.templateName = '';
        this.type = '';
        this.getSpecialTemplateList(this.paging, this.type, this.modifyDate, this.templateCode, this.templateName);
    }

    // 选择
    handleSelectionChange(val: any) {
        this.selectData = [];
        for (let i = 0; i < val.length; i++) {
            this.selectData.push(val[i].templateCode);
        }
        this.selectDataTostring = this.selectData.toString();
    }

    // 打开弹窗
    chceckData(val: string, data: any) {
        console.log(val);
        if (data) {
            this.selectData = [];
            this.selectData.push(data.templateCode);
            this.selectDataTostring = this.selectData.toString();
        }
        if (this.selectData.length < 1) {
            this.yh_message_error('请选择复核的条目');
            return;
        }
        this.checkType = val;
        this.deleteVisible = true;
        if (val == '1') {
            this.checkTitle = '确定复核通过以下条目吗？';
        } else {
            this.checkTitle = '确定复核拒绝以下条目吗？';
        }
    }

    // 提交复核请求
    submitData() {
        let url = '';
        if (this.checkType == '1') {
            url = '/entry/template/check/allow';
        } else if (this.checkType == '2') {
            url = '/entry/template/check/refuse';
        }
        this.loading = true;
        this.$axios
            .post(url, this.selectData)
            .then(res => {
                this.loading = false;
                this.getSpecialTemplateList(this.paging, this.type, this.modifyDate, this.templateCode, this.templateName);
                this.yh_message_success('执行复核成功');
                this.deleteVisible = false;
            })
            .catch(() => {
                this.deleteVisible = false;
                this.loading = false;
            });
    }
    handleSort(column): void {
        let sortType = column.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : '';
        if (sortType) {
            this.sort = this.sortableObj[column.prop] + ' ' + sortType;
        } else {
            this.sort = '';
        }
        this.paging.currentPage = 1;
        this.getSpecialTemplateList(this.paging, this.type, this.modifyDate, this.templateCode, this.templateName);
    }
}
</script>
<style lang="scss" scoped>
.branc {
    color: #222;
    height: calc(100vh - 50px);
    padding: 10px;

    .buts {
        width: calc(100vw - 20px);
        border: 1px solid #eee;
        padding: 10px;
    }

    .tables {
        margin-top: 10px;
        width: calc(100vw - 20px);
        height: calc(100vh - 140px);
        border: 1px solid #eee;
        padding: 10px;
    }

    .delete {
        padding: 20px 10px;
    }
}
</style>
